<!DOCTYPE html>
<!--
  ~ Copyright ©2018 贾维程. All rights reserved.
  -->

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      layout:decorate="~{layout/layout}">
<head>

</head>
<body>
<div layout:fragment="content">
    <h1 th:text="#{licence.select}">厂商证照查询</h1>
    <form id="itemForm" th:action="@{/supplier/list}" class="form-horizontal" method="get">
        <div class="form-group">
            <label for="name" class="col-sm-1 control-label" th:text="#{supplier.name}">厂商</label>
            <div class="col-sm-2">
                <input type="text" name="name" id="name" class="form-control" th:placeholder="#{supplier.name}"/>
            </div>
            <label for="lastDate" class="col-sm-2 control-label" th:text="#{supplier.lastDate}">索证日期</label>
            <div class="col-sm-2">
                <input type="text" name="lastDate" id="lastDate" class="form-control" th:placeholder="#{supplier.lastDate}"/>
            </div>
            <label for="state" class="col-sm-1 control-label" th:text="#{state}">状态</label>
            <div class="col-sm-1">
                <input type="text" name="state" id="state" class="form-control" min="0" th:placeholder="#{state}"/>
            </div>
        </div>
        <div class="form-group">
            <label for="page" class="col-sm-1 control-label" th:text="#{page}">页次</label>
            <div class="col-sm-1">
                <input type="text" name="page" id="page" class="form-control" value="1" min="1"
                       th:placeholder="#{page}"/>
            </div>
            <label for="pageSize" class="col-sm-2 control-label" th:text="#{pageSize}">每页数量</label>
            <div class="col-sm-1">
                <input type="text" name="pageSize" id="pageSize" class="form-control" value="20" min="1"
                       th:placeholder="#{pageSize}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-5 col-sm-7">
                <a th:href="@{/supplier/list}" class="btn btn-info" id="addCookies" th:text="#{select}">搜索</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a th:href="@{/supplier/list}" class="btn btn-info" id="clearCookies" th:text="#{reset}">重置</a>
            </div>
        </div>
    </form>

    <h1 th:text="#{selectResult}">查询结果</h1>
    <div>
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th class="col-md-1" th:text="#{no}">序号</th>
                <th class="col-md-5" th:text="#{supplier.name}">厂商</th>
                <th class="col-md-1" th:text="#{state}">状态</th>
                <th class="col-md-2" th:text="#{supplier.lastDate}">索证日期</th>
                <th class="col-md-1" th:text="#{view}">查看</th>

                <th:block sec:authorize="hasAnyAuthority('ROLE_root','ROLE_admin')">
                    <th class="col-md-1" th:text="#{item.addImage}">添加图片</th>
                    <th class="col-md-1" th:text="#{edit}">编辑</th>
                    <!--<th th:text="#{delete}">删除</th>-->
                </th:block>

            </tr>
            </thead>
            <tbody>
            <tr th:each="supplier,stat : ${supplierList.content}">
                <td th:attr="data-id=${supplier.id}" th:text="${stat.count}">序号</td>
                <td data-name="name" th:text="${supplier.name}">厂商</td>
                <td data-name="state" th:text="${supplier.state}">状态</td>
                <td th:text="${supplier.lastDate}">报告日期</td>
                <td><a th:href="@{/supplier/view/{id}(id=${supplier.id})}" th:text="#{view}">查看</a></td>

                <th:block sec:authorize="hasAnyAuthority('ROLE_root','ROLE_admin')">
                    <td><a th:href="@{/supplier/edit/{id}(id=${supplier.id})}" th:text="#{item.addImage}">添加图片</a></td>
                    <td><a href="javascript:viod(0)" class="edit">编辑</a></td>
                    <!--<td><a th:href="@{/supplier/delete/{id}(id=${supplier.id})}" th:text="#{delete}" onclick="return confirm('确定删除该条目全部资料吗?删除后无法恢复,请谨慎操作!')">删除</a></td>-->
                </th:block>

            </tr>
            </tbody>
        </table>
    </div>
    <div class="form-group">
        <div id="pagination" class="col-sm-12">
            <!-- 分页条位置 -->
            <div>
                <th:block th:unless="${supplierList.first}">
                <a th:href="@{/supplier/pageView/{page}(page=1)}">首页</a>&nbsp;&nbsp;
                <a th:href="@{/supplier/pageView/{page}(page=${supplierList.number})}">上页</a>&nbsp;&nbsp;
                </th:block>

                <th:block th:if="${supplierList.first}">
                <span>首页</span>&nbsp;&nbsp;
                <span>上页</span>&nbsp;&nbsp;
                </th:block>

                <th:block th:if="${supplierList.totalPages <= 10 && supplierList.totalPages > 0}">
                    <a th:each="i:${#numbers.sequence(1, supplierList.totalPages)}" th:href="@{/supplier/pageView/{page}(page=${i})}" th:text="${i +' '}"></a>
                </th:block>

                <th:block th:if="${supplierList.totalPages > 10}">
                    <a th:each="i:${#numbers.sequence(1,5)}" th:href="@{/supplier/pageView/{page}(page=${i})}" th:text="${i +' '}"></a>
                    <span>.....</span>
                    <a th:each="i:${#numbers.sequence(supplierList.totalPages - 4, supplierList.totalPages)}" th:href="@{/supplier/pageView/{page}(page=${i})}" th:text="${i +' '}"></a>
                </th:block>

                <th:block th:unless="${supplierList.last}">
                <a th:href="@{/supplier/pageView/{page}(page=${supplierList.number+2})}">下页</a>&nbsp;&nbsp;
                <a th:href="@{/supplier/pageView/{page}(page=${supplierList.totalPages})}">尾页</a>&nbsp;&nbsp;
                </th:block>
                <th:block th:if="${supplierList.last}">
                <span>下页</span>&nbsp;&nbsp;
                <span>尾页</span>&nbsp;&nbsp;
                </th:block>
                <span th:text="'第' + ${supplierList.number + 1} +'页/共'+ ${supplierList.totalPages} +'页&nbsp;&nbsp;共'+ ${supplierList.totalElements} +'条结果'"></span>
            </div>
        </div>
    </div>
</div>
<th:block layout:fragment="pagescript">
    <script th:src="@{/js/jquery-ui/jquery-ui.datepicker-zh-CN.js}"></script>
    <script th:src="@{/js/jquery-viladate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/jquery-viladate/messages_zh.min.js}"></script>
    <script th:inline="javascript">
        $(function () {
        // $(document).ready(function () {
            $("td").on("click",".edit",function () {
                $(this).parent().siblings(":nth-child(2),:nth-child(3)").each(function (i,t) {
                    var oldValue = $(t).text();
                    $(t).html('<input type="text" data-name="'+ $(t).attr("data-name")+'" style="width:'+ $(t).width()+'px" value="' + oldValue + '" />').find("input").data("oldValue",oldValue);
                    if (i === 0) $(t).find("input").trigger("focus");
                });
                $(this).parent().html('<a href="javascript:void(0)" id="save">保存</a> <a href="javascript:void(0)" id="cancel">取消</a>');
            });

            $("td").on("click","#cancel",function () {
                var td = $(this).parent().siblings(":nth-child(2),:nth-child(3)");
                td.each(function (i,t) {
                    $(t).html($(t).find("input").data("oldValue"));
                });
                $(this).parent().html('<a href="javascript:void(0)" class="edit">编辑</a>');
            });
            $("td").on("click","#save",function (e) {
                var edit = $(this);
                var td = $(this).parent().siblings(":nth-child(2),:nth-child(3)");
                var data = {};
                td.each(function (i,t) {
                    var input = $(t).find("input");
                    if (input.val() !== input.data("oldValue")){
                        data[input.attr("data-name")] = input.val();
                    }
                });
                if (!$.isEmptyObject(data)){
                    data.id = $(this).parent().siblings(":first").attr("data-id");
                    alert(JSON.stringify(data));
                    $.ajax({
                        type:"get",
                        url:"ajaxUpdate",
                        contentType:"application/json;charset=utf-8",
                        data:data,
                        dataType:"json",
                        success:function (data) {
                            alert(data);
                            if (data == 1) {
                                back();
                            }
                        },
                        error:function () {
                            alert("bad");
                        }
                    });
                }
                else {
                    back();
                }
                function back() {
                    td.each(function (i,t) {
                        $(t).removeClass('input').attr("data-name",$(t).find("input").attr("data-name")).html($(t).find("input").val());
                        edit.parent().html('<a href="javascript:void(0)" class="edit">编辑</a>');
                    });
                }
            });

            $("#lastDate").datepicker({
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                firstDay: 0,
                showOtherMonths: true,
                selectOtherMonths: true,
                showAnim: 'slideDown',
                showButtonPanel: true
            });
            $("#itemForm").validate({
                onsubmit: true,

                rules: {
                    lastDate: {
                        dateISO: true
                    }
                },
                messages: {

                },
                submitHandler: function (form) {
                    //form.submit();
                },
                invalidHandler: function (form, validator) {
                    return false;
                }
            });

            $("#name").val($.cookie("name"));
            $("#lastDate").val($.cookie("lastDate"));
            $("#state").val($.cookie("state"));
            if ($.cookie("page") !== undefined) $("#page").val($.cookie("page"));
            else $("#page").val(1);
            if ($.cookie("pageSize") !== undefined) $("#pageSize").val($.cookie("pageSize"));
            else $("#pageSize").val(20);

            $("#addCookies").click(function () {

                var flag = $("#itemForm").valid();
                if(!flag){
                    //没有通过验证
                    return false;
                }
                if ($("#name").val() !== '') $.cookie("name", $("#name").val(), { });
                else $.removeCookie("name", {});
                if ($("#lastDate").val() !== '') $.cookie('lastDate', $("#lastDate").val(), { });
                else $.removeCookie('lastDate', {});
                if ($("#state").val() !== '') $.cookie("state", $("#state").val(), {});
                else $.removeCookie('state', {});
                if ($("#page").val() !== '') $.cookie('page', $("#page").val(), { });
                else $.removeCookie("page", {});
                if ($("#pageSize").val() !== '') $.cookie("pageSize", $("#pageSize").val(), { });
                else $.removeCookie("pageSize", {});
            });

            $("#clearCookies").click(function () {
                $.removeCookie("name");
                $.removeCookie("lastDate");
                $.removeCookie("state");
                $.removeCookie("page");
                $.removeCookie("pageSize");
            });
        });
    </script>
</th:block>
</body>
</html>